import React, { Component } from 'react';


const headers = [
  { label: "Name", key: "name" },
  { label: "Username", key: "username" },
  { label: "Email", key: "email" },
  { label: "Phone", key: "phone" },
  { label: "Website", key: "website" }
];

// function download() {
//   axios({
//     url: 'https://source.unsplash.com/random/500x500',
//     method: 'GET',
//     responseType: 'blob'
//   })
//   .then((response) => {
//         const url = window.URL
//               .createObjectURL(new Blob(response.data));
// const objectUrl = URL.createObjectURL(blod);
// location.href=objectUrl;
//URL.revokeObjectURL(objectUrl)
//         const link = document.createElement('a');
//         link.href = url;
//         link.setAttribute('download', 'image.jpg');
//         document.body.appendChild(link);
//         link.click();
//         document.body.removeChild(link);
//   })
// }



export const AsyncXLS = (props) => {
  const { downloadSource } =  props;
  const csvLinkEl = React.createRef();
  const getUserList = () => {
    return fetch('https://jsonplaceholder.typicode.com/users')
      .then(res => res.json());
  }

  const downloadReport = async () => {
    const data = await this.getUserList();
    // this.setState({ data: data }, () => {
    //   setTimeout(() => {
    //     this.csvLinkEl.current.link.click();
    //   });
    // });
  }

  const downloadXls = () => {
    const url = window.URL.createObjectURL(new Blob([headers]), {type: 'application/vnd.ms-excel'});
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', 'image.xls');
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  }


  return (
    <div onClick={downloadXls}>
      {props.children}
    </div>
  );

}

// export class AsyncXLS extends Component {
//   constructor(props) {
//     super(props);
//     this.state = {
//       data: []
//     }
//     this.csvLinkEl = React.createRef();
//   }

  

//   render() {
//     const { data } = this.state;
//     {/* <CSVLink
//         headers={headers}
//         filename="Clue_Mediator_Report_Async.csv"
//         data={data}
//         ref={this.csvLinkEl}
//       /> */}
    
//   }
// }
